<template>
  <div class="statistics-page">
    <!-- 顶部导航 -->
    <div class="header d-flex align-items-center">
      <router-link to="/profile" class="back-button me-3">
        <i class="bi bi-arrow-left"></i>
      </router-link>
      <h5 class="mb-0">学习统计</h5>
    </div>

    <!-- 时间范围选择 -->
    <div class="stats-card">
      <div class="time-selector">
        <button
          v-for="period in periods"
          :key="period"
          class="time-btn"
          :class="{ active: currentPeriod === period }"
          @click="handlePeriodChange(period)"
        >{{ period }}</button>
      </div>

      <!-- 学习时长统计 -->
      <div class="progress-item">
        <div class="progress-header">
          <span class="progress-label">总学习时长</span>
          <span class="progress-value">{{ totalTime }}分钟</span>
        </div>
        <div class="progress">
          <div class="progress-bar bg-success" :style="{ width: percentTime + '%' }"></div>
        </div>
      </div>

      <!-- 完成题目统计 -->
      <div class="progress-item">
        <div class="progress-header">
          <span class="progress-label">完成题目</span>
          <span class="progress-value">{{numcompleted}}题</span>
        </div>
        <div class="progress">
          <div class="progress-bar bg-info" :style="{ width: percentnum + '%' }"></div>
        </div>
      </div>

      <!-- 知识点掌握统计 -->
      <div class="progress-item" style="display: none">
        <div class="progress-header">
          <span class="progress-label">知识点掌握</span>
          <span class="progress-value">78%</span>
        </div>
        <div class="progress">
          <div class="progress-bar bg-warning" style="width: 78%"></div>
        </div>
      </div>
    </div>

    <!-- 成就统计 -->
    <div class="stats-card">
      <h6 class="mb-4">学习成就</h6>
      <div class="achievement-list">
        <div v-for="achievement in achievements"
             :key="achievement.label"
             class="achievement-item">
          <div class="achievement-icon">
            <i :class="achievement.icon"></i>
          </div>
          <div class="achievement-value">{{ achievement.value }}</div>
          <div class="achievement-label">{{ achievement.label }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/router/http'

export default {
  name: 'StudyStatisticsView',
  data() {
    return {
      periods: ['周', '月', '年'],
      currentPeriod: '周',
      achievements: [
        {
          icon: 'bi bi-calendar-check',
          value: '42天',
          label: '累计打卡'
        },
        {
          icon: 'bi bi-star',
          value: '2460',
          label: '累计积分'
        }
        // {
        //   icon: 'bi bi-trophy',
        //   value: '16个',
        //   label: '获得勋章'
        // },
        // {
        //   icon: 'bi bi-graph-up',
        //   value: 'Top 5%',
        //   label: '超越用户'
        // }
      ],
      userEventLogCount:0,
      score:0,
      numcompleted:0,
      percentnum:0,
      totalTime:0,
      percentTime:0
    }
  },
  created() {
    this.fetchUserEventLogCount();
  },
  methods: {
    fetchUserEventLogCount() {
      http.get('/student/getUserEventLog/counts') // 假设你的后端接口地址为 /counts
          .then(response => {
            this.userEventLogCount = response.data.response; // 根据实际返回的数据结构调整
            this.achievements[0].value = this.userEventLogCount + '天';
          })
          .catch(error => {
            console.error('获取用户事件日志数量失败:', error);
          });
      http.get('/student/getUserEventLog/integral')
          .then(response => {
            this.score = response.data.response; // 根据实际返回的数据结构调整
            this.achievements[1].value = this.score;
          })
          .catch(error => {
            console.error('获取用户事件日志积分失败:', error);
          });
      http.get('/student/answer/getNumcompleted',{params: { time: 'week' }})
         .then(response => {
           console.log(response.data.response);
            this.numcompleted = response.data.response[0]; // 根据实际返回的数据结构调整
            this.percentnum = response.data.response[1];
          })
         .catch(error => {
            console.error('获取用户事件日志完成数失败:', error);
          });
      http.get('/student/answer/getTotalTime',{params: { time: 'week' }})
          .then(response => {
            console.log(response.data.response);
            this.totalTime = response.data.response[0]; // 根据实际返回的数据结构调整
            this.percentTime = response.data.response[1];
          })
    },
      handlePeriodChange(period) {
        this.currentPeriod = period;
        this.updateperiod(period);
        this.updateTime(period);
      },
      updateperiod(period) {
        // 确保 period 不为 null 或 undefined
        if (!period) {
          console.error('Period is not provided');
          return;
        }

        // 移除生产环境中的 console.log
        if (process.env.NODE_ENV !== 'production') {
          console.log(period);
        }

        // 使用对象映射来简化逻辑
        const periodMapping = {
          '周': 'week',
          '月': 'month',
          '年': 'year'
        };

        const periodeng = periodMapping[period] || 'unknown';

        http.get('/student/answer/getNumcompleted', { params: { time: periodeng } })
            .then(response => {
              if (process.env.NODE_ENV !== 'production') {
                console.log(response.data.response);
              }
              this.numcompleted = response.data.response[0]; // 根据实际返回的数据结构调整
              this.percentnum = response.data.response[1];
            })
            .catch(error => {
              console.error('获取用户事件日志完成数失败:', error);
              // 提供用户友好的提示信息
              this.$message.error('获取用户事件日志完成数失败，请稍后再试');
            });
      },
      updateTime(period){
        // 确保 period 不为 null 或 undefined
        if (!period) {
          console.error('Period is not provided');
          return;
        }

        // 移除生产环境中的 console.log
        if (process.env.NODE_ENV !== 'production') {
          console.log(period);
        }

        // 使用对象映射来简化逻辑
        const periodMapping = {
          '周': 'week',
          '月': 'month',
          '年': 'year'
        };

        const periodeng = periodMapping[period] || 'unknown';

        http.get('/student/answer/getTotalTime', { params: { time: periodeng } })
            .then(response => {
              if (process.env.NODE_ENV !== 'production') {
                console.log(response.data.response);
              }
              this.totalTime = response.data.response[0];
              this.percentTime = response.data.response[1];
            })
            .catch(error => {
              console.error('获取用户事件日志完成数失败:', error);
              // 提供用户友好的提示信息
              this.$message.error('获取用户事件日志完成数失败，请稍后再试');
            });
      }
    }

}
</script>

<style scoped>
.statistics-page {
  background-color: #f5f5f5;
  padding-bottom: 20px;
  min-height: 100vh;
}

.header {
  background: linear-gradient(135deg, #00b8a9, #00a19a);
  color: white;
  padding: 15px;
  position: relative;
}

.back-button {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}

.stats-card {
  background: white;
  border-radius: 15px;
  margin: 15px;
  padding: 20px;
}

.time-selector {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.time-btn {
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid #eee;
  background: white;
  color: #666;
  font-size: 0.9rem;
}

.time-btn.active {
  background: #00b8a9;
  color: white;
  border-color: #00b8a9;
}

.progress-item {
  margin-bottom: 20px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.progress-label {
  color: #666;
  font-size: 0.9rem;
}

.progress-value {
  color: #00b8a9;
  font-weight: bold;
}

.progress {
  height: 8px;
  border-radius: 4px;
}

.achievement-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.achievement-item {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 15px;
  text-align: center;
}

.achievement-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: rgba(0,184,169,0.1);
  color: #00b8a9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 1.2rem;
}

.achievement-value {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.achievement-label {
  font-size: 0.8rem;
  color: #666;
}
</style> 